/** 天空蓝 */
$brand-primary: #61CED7;
/** 少女粉 */
$brand-primary-pink: #FF66CC;
/** 基佬紫 */
$brand-primary-purple: #CC33FF;
/** 柠檬黄 */
$brand-primary-yellow: #F04A00;


/** 系统背景颜色 */
@mixin systemBackColor() {
    background-color: $brand-primary;

    [system-color="blue"] & {
        background-color: $brand-primary;
    }

    [system-color="pink"] & {
        background-color: $brand-primary-pink;
    }

    [system-color="purple"] & {
        background-color: $brand-primary-purple;
    }

    [system-color="yellow"] & {
        background-color: $brand-primary-yellow;
    }
}

/** 系统文字颜色 */
@mixin systemFontColor() {
    color: $brand-primary;

    [system-color="blue"] & {
        color: $brand-primary;
    }

    [system-color="pink"] & {
        color: $brand-primary-pink;
    }

    [system-color="purple"] & {
        color: $brand-primary-purple;
    }

    [system-color="yellow"] & {
        color: $brand-primary-yellow;
    }
}

/** border样式 */
@mixin systemBorderStyle($width) {
    border: $width solid $brand-primary;

    [system-color="blue"] & {
        border: $width solid $brand-primary;
    }

    [system-color="pink"] & {
        border: $width solid $brand-primary-pink;
    }

    [system-color="purple"] & {
        border: $width solid $brand-primary-purple;
    }

    [system-color="yellow"] & {
        border: $width solid $brand-primary-yellow;
    }
}


/** box-shadow样式 */
@mixin systemBoxShaowStyle($px1, $px2, $px3) {
    box-shadow: $px1 $px2 $px3 $brand-primary;

    [system-color="blue"] & {
        box-shadow: $px1 $px2 $px3 $brand-primary;
    }

    [system-color="pink"] & {
        box-shadow: $px1 $px2 $px3 $brand-primary-pink;
    }

    [system-color="purple"] & {
        box-shadow: $px1 $px2 $px3 $brand-primary-purple;
    }

    [system-color="yellow"] & {
        box-shadow: $px1 $px2 $px3 $brand-primary-yellow;
    }
}


/** text-shadow样式 */
@mixin systemTextShaowStyle($px1, $px2, $px3) {
    text-shadow: $px1 $px2 $px3 $brand-primary;

    [system-color="blue"] & {
        text-shadow: $px1 $px2 $px3 $brand-primary;
    }

    [system-color="pink"] & {
        text-shadow: $px1 $px2 $px3 $brand-primary-pink;
    }

    [system-color="purple"] & {
        text-shadow: $px1 $px2 $px3 $brand-primary-purple;
    }

    [system-color="yellow"] & {
        text-shadow: $px1 $px2 $px3 $brand-primary-yellow;
    }
}

.screen_page {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: auto;
    background: #ffffff;
}